<template>
  <el-card>
    <div slot="header">历史飞行参数列表</div>
    <div class="info">
      <el-table
        :data="tableData"
        height="390"
        style="width: 100%; font-size: 20px"
      >
        <el-table-column prop="name" label="名称" width="300" align="center">
        </el-table-column>
        <el-table-column
          prop="navid"
          label="无人机ID"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="task"
          label="任务编号"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="start"
          label="开始飞行时间"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="flytime"
          label="飞行时长"
          width="300"
          align="center"
        >
        </el-table-column>
        <el-table-column>
          <el-tooltip
            class="item"
            effect="dark"
            content="点击查看飞行状态图、高度变化图、速度变化图"
            placement="top-start"
          >
            <el-button type="primary" icon="el-icon-search" class="button"
              >查看</el-button
            >
          </el-tooltip>
        </el-table-column>
      </el-table>
    </div>
    <div class="info2">
      <el-card class="box-card" shadow="never">
        <div class="left">
          <el-amap
            class="amap-box"
            :vid="map"
            :zoom="zoom"
            :center="center"
            :plugin="plugin"
            :events="events"
          >
            <el-amap-marker :position="center" :icon="icon"> </el-amap-marker>
          </el-amap>
        </div>
        <div class="middle">
          <img src="../assets/飞行高度变化.png" alt="" />
        </div>
        <div class="right">
          <img src="../assets/飞行速度变化.png" alt="" />
        </div>
      </el-card>
    </div>
  </el-card>
</template>
  
  <script>
export default {
  name: "flydata",
  data() {
    return {
      tableData: [
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "1",
          start: "2022-10-13 7:43",
          flytime: "21min3s",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "2",
          start: "2022-10-21 8:30",
          flytime: "4min5s",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "3",
          start: "2022-11-15 14:47",
          flytime: "3min4s",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "4",
          start: "2022-11-26 17:56",
          flytime: "6min18s",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "298CHBKROAOU5P",
          task: "5",
          start: "2022-11-26 19:05",
          flytime: "8min29s",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "MO782B1JOI8SAF",
          task: "5",
          start: "2022-12-12 19:05",
          flytime: "7min28s",
        },
        {
          name: "大疆Mavic2 行业1",
          navid: "MO782B1JOI8SAF",
          task: "6",
          start: "2022-12-15 19:05",
          flytime: "6min44s",
        },
        {
          name: "大疆Mavic2 行业2",
          navid: "HK214I0SA818CA",
          task: "7",
          start: "2022-12-30 19:05",
          flytime: "7min33s",
        },
      ],
      zoom: 13,
      center: [121.5273285, 31.21515044],
      position: [121.5273285, 31.21515044],
      icon: require("../assets/无人机.png"), //自定义地图标记点图片
      events: {
        init(o) {
          console.log(o.getCenter());
        },
        zoomchange: (e) => {
          console.log(e);
        },
        zoomend: (e) => {
          //获取当前缩放zoom值
          console.log(this.$refs.map.$$getInstance().getZoom());
          console.log(e);
        },
        click: (e) => {
          alert("map clicked");
        },
      },
      markers: [
        {
          position: [121.5273285, 31.21515044],
        },
        {
          position: [121.5174286, 31.21515044],
        },
      ],
      //使用其他组件
      plugin: [
        {
          pName: "Scale",
          events: {
            init(instance) {
              console.log(instance);
            },
          },
        },
        {
          pName: "ToolBar",
          events: {
            init(instance) {
              console.log(instance);
            },
          },
        },
      ],
    };
  },
};
</script>
  
  <style scoped>
.info {
  height: 400px;
}
.info2 {
  height: 640px;
}
.box-card {
  height: 580px;
}
.left {
  margin-top: 20px;
  height: 500px;
  width: 600px;
  float: left;
}
.middle {
  margin-top: 20px;
  height: 500px;
  margin-left: 30px;
  margin-right: 20px;
  width: 710px;
  float: left;
}
.middle img {
  width: 100%;
  height: 100%;
}
.right {
  margin-top: 20px;
  height: 500px;
  width: 710px;
  float: right;
}
.right img {
  width: 100%;
  height: 100%;
}
</style>